<script setup lang="ts">
import {inject} from "vue";
import {IFoodListService} from "../types/IFoodListService.ts";

import jianIcon from "../assets/icons/businessInfo/jian.png"
import jiaIcon from "../assets/icons/businessInfo/jia.png"

const foodListService = inject<IFoodListService>("foodListService")!
const props = defineProps(["item"]);

</script>

<template>
  <div class="food-item">
    <div class="food-left">
      <img referrerpolicy="no-referrer" :src="'https://www.z4a.net/images/'+ props.item.img+'.png'"
           :alt="props.item.img">
      <div class="food-left-info">
        <h3>{{ props.item.name }}</h3>
        <p>{{ props.item.description }}</p>
        <p>&#165;{{ props.item.price }}</p>
      </div>
    </div>
    <div class="food-right">
      <div>
        <!--            <i class="fa fa-minus-circle"></i>-->
        <img v-if="props.item.quantity>0" class="minus" :src="jianIcon" @click="foodListService.minusQuantity(item.id)">
      </div>
      <p><span v-if="props.item.quantity>0">{{ props.item.quantity }}</span></p>
      <div>
        <img class="plus" :src="jiaIcon" @click="foodListService.addQuantity(item.id)">
        <!--            <i class="fa fa-plus-circle"></i>-->
      </div>
    </div>
  </div>
</template>

<style scoped>
.food-item {
  display: flex;
}

.food-left {
  display: flex;
  align-items: center;
}

.food-left img {
  width: 20vw;

}

.food-left .food-left-info {
  margin-left: 3vw;

}

.food-left .food-left-info h3 {
  font-size: 3.8vw;
  color: #555;
}

.food-left .food-left-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

.food-right {
  width: 20vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 15px;
  margin-left: auto;
  margin-top: auto;
}

.food-right .plus {
  width: 20px;
  height: 20px;
  color: #999;
  cursor: pointer;


}

.food-right .minus {
  width: 20px;
  height: 20px;
  color: #999;
  cursor: pointer;
  /*margin-right: 10px;*/

}

.food-right p {
  font-size: 3.6vw;
  color: #333;
  /*margin-left: 10px;*/
  margin: 0 10px;
}
</style>